<template>
  <div class="dashboard-container">
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 统计指标区域 -->
      <div class="stats-panel">
        <el-row>
          <el-col>
            <div class="stat-card">
              <el-statistic title="PPM" :value="stats.ppm">
                <template #suffix>
                  <span class="stat-unit">件/分钟</span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="stat-card">
              <el-statistic title="进库数" :value="stats.inbound">
                <template #suffix>
                  <span class="stat-unit">托盘</span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="stat-card">
              <el-statistic title="出库数" :value="stats.outbound">
                <template #suffix>
                  <span class="stat-unit">托盘</span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="stat-card">
              <el-statistic title="处理效率" :value="stats.throughput">
                <template #suffix>
                  <span class="stat-unit">托/小时</span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 可折叠任务列表 -->
      <div class="task-panel">
        <div class="panel-header">
          <h3 class="panel-title">实时任务队列</h3>
          <el-button
            size="small"
            @click="toggleExpand"
            :icon="isExpanded ? 'ArrowUp' : 'ArrowDown'"
          >
            {{ isExpanded ? '收起' : '展开' }}
          </el-button>
        </div>
        <el-table
          :data="visibleTasks"
          :height="tableHeight"
          style="width: 100%"
          :row-class-name="taskRowStyle"
        >
          <el-table-column prop="id" label="任务ID" width="68" />
          <el-table-column label="位置" width="85">
            <template #default="{ row }">R{{ row.row }} C{{ row.col }}</template>
          </el-table-column>
          <el-table-column prop="layer" label="层" width="40" />
          <el-table-column prop="type" label="类型" width="65">
            <template #default="{ row }">
              <el-tag :type="row.type === '出库' ? 'danger' : 'success'" size="small">
                {{ row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="进度" width="120">
            <template #default="{ row }">
              <el-progress
                :percentage="row.progress"
                :stroke-width="14"
                :color="row.type === '出库' ? '#f56c6c' : '#67c23a'"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import {
    ElButton,
    ElCol,
    ElProgress,
    ElRow,
    ElStatistic,
    ElTable,
    ElTableColumn,
    ElTag,
  } from 'element-plus';

  // 模拟数据
  const stats = ref({
    ppm: 286,
    inbound: 1456,
    outbound: 1328,
    throughput: 89,
  });

  const tasks = ref([
    { id: 'T2351', row: 'A03', col: '12', layer: 2, type: '出库', progress: 65 },
    { id: 'T1892', row: 'B05', col: '08', layer: 1, type: '入库', progress: 90 },
    { id: 'T3456', row: 'C12', col: '05', layer: 3, type: '出库', progress: 30 },
    { id: 'T4567', row: 'D08', col: '15', layer: 2, type: '入库', progress: 85 },
    { id: 'T5678', row: 'E02', col: '09', layer: 1, type: '出库', progress: 45 },
  ]);

  const isExpanded = ref(false);

  // 计算属性
  const visibleTasks = computed(() => (isExpanded.value ? tasks.value : tasks.value.slice(0, 3)));

  const tableHeight = computed(() => (isExpanded.value ? '30vh' : '20vh'));

  const taskRowStyle = ({ row }) => {
    return row.type === '出库' ? 'outbound-row' : 'inbound-row';
  };

  const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
  };
</script>

<style scoped>
  .dashboard-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .main-content {
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    gap: 1.5vw;
    height: 15vh;
    margin-bottom: 15vh;
  }
  .stat-card {
    background: rgba(45, 58, 76, 0.6);
    border-radius: 0.6vw;
    padding: 0.5vh 1vw;
    margin-bottom: 1.1vh;
    width: 7vw;
    position: relative;
    overflow: hidden;
  }

  .stat-card :deep(.el-statistic__head),
  .stat-card :deep(.el-statistic__content) {
    color: #fff;
    font-size: 0.8vw;
  }
  :deep(.el-statistic__content) {
    display: inline-flex;
    gap: 0.4em;
  }

  .stat-unit {
    color: #88a5c4;
    font-size: 0.6vw;
  }

  .stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #409eff 30%, rgba(255, 255, 255, 0.1));
  }

  .stat-unit {
    color: #88a5c4;
    font-size: 0.6vw;
  }

  .task-panel {
    background: rgba(22, 33, 49, 0.6);
    border-radius: 0.8vw;
    padding: 1vw;
    width: 30vw;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vh;
  }

  .panel-title {
    color: #a0b3c6;
    font-size: 1.1vw;
    margin: 0;
  }

  .el-button {
    background: rgba(64, 158, 255, 0.1);
    border-color: rgba(64, 158, 255, 0.3);
    color: #6ab0ff;
  }

  .el-button:hover {
    background: rgba(64, 158, 255, 0.2);
  }

  /* 表格定制样式 */
  .el-table {
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-text-color: #c0d4e8;
    --el-table-header-text-color: #88a5c4;
    transition: height 0.3s ease;
  }

  .el-table::before {
    background-color: rgba(160, 179, 198, 0.1);
  }

  :deep(.el-table__row) td {
    background: transparent !important;
    border-bottom: 1px solid rgba(160, 179, 198, 0.1) !important;
  }

  .mt-2 {
    margin-top: 1vh;
  }
</style>
